<template>

	<el-drawer :title="title" :visible="open" direction="btt" :size="height" :show-close="false"
		:close-on-press-escape="false" append-to-body :wrapperClosable="false" :with-header="false" v-loading="loading">
		<div class="header">
			<el-page-header @back="cancel" :content="title"></el-page-header>
			<el-button v-if="headerBtnShow" type="primary" size="mini" icon="el-icon-check" @click="submitForm">保存</el-button>
		</div>
		<div style="height: calc(90vh - 69px);overflow-x: hidden;padding:20px 30px;">
			<slot name="center" v-if="open">
			</slot>
		</div>
	</el-drawer>
</template>

<script>
	export default {
		props: {
			height: {
				default: '90%'
			},
			headerBtnShow:{
				default:true
			}
		},
		name: "Template",
		data() {
			return {
				// 遮罩层
				loading: false,
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
			};
		},
		watch: {
			headerBtnShow(a){
				this.headerBtnShow = a
			},
			open(a) {
				if (!a) {
					this.loading = false;
				}
			}
		},
		created() {},
		methods: {
			submitForm() {
				this.loading = true;
				this.$emit('ok')
			},
			cancel() {
				this.open = false
				this.title = ''
				this.$emit('close')
			}
		}
	};
</script>
<style scoped lang="scss">
	.header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #DCDFE6;
		padding:20px 30px;
	}
</style>